<template>
  <div>
    <!-- 筛选选择触发按钮 -->
    <van-sticky :offset-top="50">
      <van-button
        style="height: 0.5rem;position: relative;top:-0.1rem;margin:0 auto; width: 3rem;"
        type="warning"
        block
        @click="popShow.filterPanel = true"
      >
        <van-icon name="arrow-down" />
      </van-button>
    </van-sticky>
    <!-- 筛选条件弹出层 -->
    <van-popup
      v-model="popShow.filterPanel"
      position="top"
      style="height: 45%;"
      @closed="closeFilterPopup"
    >
      <center>
        <h2 style="margin-top: 0.5rem;"> 设置开课查询条件</h2>

      </center>
      <van-form>
        <van-field label="归属课程">
          <template #input>
            <van-dropdown-menu style="">
              <van-dropdown-item
                v-model="filterData.courseId"
                :options="opData.course"
              />
            </van-dropdown-menu>
          </template>
        </van-field>
        <van-field label="开课学年">
          <template #input>
            <van-dropdown-menu>
              <van-dropdown-item
                v-model="filterData.teachYear"
                :options="opData.year"
              />
            </van-dropdown-menu>
          </template>
        </van-field>
        <van-field label="开课学期">
          <template #input>
            <van-dropdown-menu>
              <van-dropdown-item
                v-model="filterData.teachTerm"
                :options="opData.term"
              />
            </van-dropdown-menu>
          </template>
        </van-field>
        <van-field
          v-model="filterData.teacherName"
          label="授课教师"
          placeholder="输入教师姓名，支持模糊搜索"
          class="cf-input"
        />
      </van-form>
      <van-button
        block
        type="primary"
        round
        style="margin-top: 1rem;width: 90%;margin-left: 5%;"
        @click="popShow.filterPanel = false "
      >确认</van-button>
    </van-popup>
    <!-- 开课数据展示列表 -->
    <van-list
      v-model="lazyListControl.loading"
      :finished="lazyListControl.finish"
      :error="lazyListControl.error"
      finished-text="已经到底了"
      loading-text="加载数据中"
      error-text="出错了~"
      @load="refreshCourseListData"
    >
      <van-card
        v-for="c in courseList"
        :key="c.id"
        :desc=" `${c.teachTimeName? c.teachTimeName : '未安排时段'}，${c.classroomName?c.classroomName:'未安排教室' }，${c.teacherName}`"
      >
        <template #title>
          <h3>{{ c.teachClassName }}</h3>
        </template>
        <template #tags>
          <van-tag
            mark
            type="primary"
          >{{ c.courseName }}</van-tag>
          <van-tag
            mark
            style="margin-left: 0.1rem;"
            type="warning"
          >{{ `${c.teachYear}学年` }}</van-tag>
          <van-tag
            mark
            style="margin-left: 0.1rem;"
            type="danger"
          >{{ `第${c.teachTerm}学期` }}</van-tag>
          <van-tag
            mark
            style="margin-left: 0.1rem;"
            color="#457896"
          >{{ `预计${c.expectedPeopleNum}人上课` }}</van-tag>

        </template>
      </van-card>
    </van-list>
  </div>

</template>

<script>
import { Popup, Field, Form, DropdownMenu, DropdownItem, Card, List, Sticky, Tag } from 'vant'
import { getCourseDropDown } from '@/api/bussiness/course/dropdown'
import { transDropDown, getTechYearDropDown, getTeachTermDropDown } from '@/utils/dropdown'
import { lazyList as lazyListCsData } from '@/api/bussiness/course/courseSchedule'

export default {
  name: 'CourseOverview',
  components: {
    [Popup.name]: Popup,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Form.name]: Form,
    [Field.name]: Field,
    [Card.name]: Card,
    [List.name]: List,
    [Sticky.name]: Sticky,
    [Tag.name]: Tag
  },
  data () {
    return {
      popShow: {
        filterPanel: false // 筛选条件选择面板
      },
      opData: {
        course: [],
        year: [],
        term: []
      },
      lazyQueryInfo: {
        currentPos: 0,
        chunkSize: 10
      },
      filterData: {
        courseId: null,
        teachTerm: null,
        teachYear: null,
        teacherName: ''
      },
      courseList: [],
      lazyListControl: { // 懒加载列表控制参数
        loading: false,
        finish: false,
        error: false
      }
    }
  },
  computed: {
    filterFormData () {
      return { lazyQueryInfo: this.lazyQueryInfo, ...this.filterData }
    }
  },
  created () {
    // 加载下拉数据
    this.refeshOpData()
  },
  methods: {
    refeshOpData () { // 加载条件查询表单下拉数据
      // 加载归属课程数据
      getCourseDropDown().then(({ data }) => {
        const ops = []
        ops.push({ text: '选择归属课程', value: null })
        ops.push(...transDropDown(data))
        this.opData.course = ops
      })
      // 加载学年数据
      this.opData.year = getTechYearDropDown()
      // 加载学期数据
      this.opData.term = getTeachTermDropDown()
    },
    closeFilterPopup () { // 响应关闭条件弹出层
      this.courseList = []
      this.lazyQueryInfo.currentPos = 0
      this.lazyListControl.finish = false
      this.refreshCourseListData()
    },
    refreshCourseListData () { // 刷新课程数据
      this.lazyListControl.loading = true
      lazyListCsData(this.filterFormData).then(({ list }) => {
        this.courseList.push(...list)
        this.lazyQueryInfo.currentPos += this.lazyQueryInfo.chunkSize
        this.lazyListControl.loading = false
        if (list.length < this.lazyQueryInfo.chunkSize) {
          this.lazyListControl.finish = true
        }
      }).catch(() => {
        this.lazyListControl.loading = false
        this.lazyListControl.error = true
      })
    }
  }
}

</script>

<style lang="less" scoped>
/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
  height: 0.5rem;
  position: relative;
  top: -0.05rem;
}
/deep/ .van-dropdown-item__option span {
  margin-left: 2.8rem;
  display: block;
  width: 3rem;
  font-size: 12px;
}
/deep/ .cf-input .van-field__control {
  background-color: whitesmoke;
  height: 0.7rem;
}
</style>
